import React from 'react'

import './index.scss'
// 引入head组件
import Head from 'next/head'  
// 顶部导航
import TopNavigation from '../../components/topNavigation'
// banner
import Banner from '../../components/banner'
// 联系方式
import ContactDetails from './contactDetails'
// 提交需求
import ContactRequest from './contactRequest'
// 地图
import ContactMap from './contactMap'
// 右侧导航
import Navigation from '../../components/navigation'
// 底部组件
import Footer from '../../components/footer'
// redux
import store from '../../store'
// 方法请求
import { getContactData,getHeadAndTailData} from '../../api/api'

export default class ContactGp extends React.Component{

    static async getInitialProps({store}){
        let contactData = await getContactData()
        // 底部数据
        let footerData = await getHeadAndTailData()
        return {
            contactData,
            footerData: footerData.data,
        }
    }

    constructor(props) {
        super(props);
        let {navList, remUrl} = store.getState()
        this.state = {
            // 控制右侧侧边栏展示隐藏
            displayNav: false,
            navFrag: true,
            navList,
            remUrl,
        }
    }
    render(){
        return(
            <>
                <Head>
                    <meta charSet='utf-8'/>
                    <title>{this.props.footerData.info.contact_title}</title>
                    <meta name="keywords" content={this.props.footerData.info.contact_keywords} />
                    <meta name="description" content={this.props.footerData.info.contact_description}/>
                    <link rel="icon" href={this.props.footerData.web_icon}/>
                    <script src={this.state.remUrl}></script>
                </Head>
                <div className='contact_gp' onClick={this.downDisplayNav.bind(this)}>
                    {/*顶部导航*/}
                    <TopNavigation title={'contactGp'} changeDisplayNav={this.changeDisplayNav.bind(this)} />
                    {/*banner图*/}
                    <Banner type={'contactGp'}/>
                    {/*联系方式*/}
                    <ContactDetails contactData={this.props.contactData.data}  />
                    {/*提交需求*/}
                    <ContactRequest />
                    {/*地图*/}
                    <ContactMap />
                    {/*右侧导航*/}
                    <Navigation navFrag={this.state.navFrag} displayNav={this.state.displayNav} />
                    {/*底部*/}
                    <Footer footerData={this.props.footerData} />
                </div>
            </>

        )
    }
    downDisplayNav(){
        this.state.displayNav && (
            this.setState({
                displayNav: false
            })
        )
    }
    changeDisplayNav(){
        this.setState({
            displayNav: !this.state.displayNav,
            navFrag:false
        })
    }
}
